<template>
	<el-dialog :model-value="show" title="修改密码" @close="onclose"
	>
		<el-form
		 ref="ruleFormRef"
		    :model="ruleForm"
		    status-icon
		    :rules="rules"
		    label-width="120px"
		    class="demo-ruleForm"
			:label-width="formLabelWidth">
			<el-form-item label="用户名" >
				<span>{{ mainStore.userInfo.user_name }}</span>
			</el-form-item>
			<el-form-item label="原密码"  prop="password">
				<el-input v-model="ruleForm.password" autocomplete="off" />
			</el-form-item>
			<el-form-item label="新密码"  prop="pass">
				<el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
			</el-form-item>
			<el-form-item label="确认密码"  prop="checkPass">
				<el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="fn">取消</el-button>
				<el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
//PIANA
import { useMainStore } from '@/store/index.js';
import md5 from 'js-md5'
import { getCurrentInstance } from 'vue';

const mainStore = useMainStore();
const { proxy } = getCurrentInstance();

const props = defineProps({
	show: {
		type: Boolean,
		default: false
	}
});
const emits = defineEmits(['update:show','close']);
const fn = () => {
	emits('update:show', false);
};
const { show } = toRefs(props);

const dialogTableVisible = ref(false);
const formLabelWidth = '140px';

const ruleForm = reactive({});

const ruleFormRef = ref<FormInstance>()

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (ruleForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== ruleForm.pass) {
    callback(new Error("两次密码不一致!"))
  } else {
    callback()
  }
}

const rules = reactive<FormRules<typeof ruleForm>>({
  password: [ { required: true, message: '请输入原密码', trigger: 'blur' }],
  pass: [{ required: true, message: '请输入新密码', trigger: 'blur' },{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ required: true, message: '请输入确认密码', trigger: 'blur' },{ validator: validatePass2, trigger: 'blur' }]
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
		const params = {
			user_name:mainStore.userInfo.user_name,
			password:ruleForm.password,
			pass:ruleForm.pass,
			passcode:md5(ruleForm.pass)
		}
		proxy.$post('/password',params).then(res=>{
			if(res.code === 200){
				ElMessage({
					message: res.msg,
					type: 'success'
				});
			}
			fn()
		})
    } else {
      console.log('error submit!')
      return false
    }
  })
}

///222

function onclose(){
	console.log('close');
	emits('close');
}
</script>

<style></style>
